<template>
    <div class="start">
        <div>
            <p>别踩白块儿</p>
        </div>
        <div class="start_btn" @click.stop="startGame">开始游戏</div>
    </div>
</template>

<style lang="less" scoped>
.start {
    width: 400px;
    height: 643px;
    padding: 40px 0;
    box-sizing: border-box;
    background-image: url('../../assets/back.jpeg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    text-align: center;

    .start_logo {
        width: 100px;
        height: 100px;
        background-color: #f60;
    }

    p{
        margin-top: 20px;
        font-size: 30px;
    }

    @keyframes show {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.3);
        }

        100% {
            transform: scale(1);
        }
    }

    .start_btn {
        width: 150px;
        height: 40px;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        color: #FFF;
        background-color: #000;
        letter-spacing: 1px;
        animation: show ease-in-out 1s infinite;
        cursor: pointer;

        &:active {
            background-color: #1f1e1e;
        }
    }
}
</style>

<script lang="ts" setup>
const emit = defineEmits<{
    start: []
}>()
const startGame = ()=>{
    emit("start")
}
</script>